<template>
<!--    只允许有一个根节点div，在最外围套一个-->
    <div>
        <table>
            <tr>
                <td>编号</td>
                <td>书名</td>
                <td>作者</td>
            </tr>
<!--            利用v-for遍历books，item相当于books[i]-->
            <tr v-for="item in books">
                <td>{{item.id}}</td>
                <td>{{item.book_name}}</td>
                <td>{{item.book_author}}</td>
            </tr>

        </table>
        {{msg}}
    </div>
    
</template>

<script>
    export default {
        name: "Book",
        data(){
            return {
                msg:'Hello Vue',
                books:[{
                    id:1,
                    book_name:'java实战',
                    book_author:'Garfield'
                }, {
                    id: 2,
                    book_name: '怎样学好日语',
                    book_author: '樱桃小丸子'
                }
                ]
            }
        },
        created() {
            const that = this;
            axios.get('http://localhost:8181/book/findall').then(function (resp) {
                that.books = resp.data;
            })
        }
    }
</script>

<style scoped>

</style>